<template>
    <div class="box">
        <div class="header_box">
            <headerView>
                <template v-slot:center>
                    <div class="header_box_main">
                        使用时间
                    </div>  
                </template>
                <template v-slot:right>
                    <div>
                        确定
                    </div>  
                </template>
            </headerView>
        </div>
        <div class="banner">
            <p>生效星期</p>
            <div class="card1">
                <div class="btnDiv" :class="item.isChecked?'btnDivBright':''" v-for="item in weekList" 
                :key="item.id" @click="item.isChecked=!item.isChecked">
                    {{item.text}}
                </div>
            </div>
            <p>生效时间</p>

            <div class="card1">
                <div class="btnDiv" 
                :class="alldayisChecked?'btnDivBright':''" 
                @click="alldayisChecked=!alldayisChecked">
                    全天
                </div>
                <div class="btnDiv" 
                :class="selfisChecked?'btnDivBright':''" 
                @click="selfisChecked=!selfisChecked">
                    自定义
                </div>
            </div>
            <div class="selfdefineDiv" :class="selfisChecked?'show1':''">
                <input type="text" placeholder="开始时间">
                <span>+</span>
                <input type="text" placeholder="结束时间">
            </div>
            
        </div>
       
    </div>
</template>
<style scoped>
    .header_box_main{
        background: #ff6e53;
        width: 100px;
        text-align: center;
        margin:0 auto;
    }
    .box{
        background: #ffffff;
    }
    .banner{
        padding: 20px;
        font-size: 16px;
    }
    .card1{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .btnDiv{
        width: 150px;
        height: 50px;
        background: #f5f5f5;
        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .btnDivBright{
        background: #ffeeee;
        outline: 1px solid #ff6e53;
        color: #ff6e53;
    }
    input{
        margin-top: 10px;
        width: 150px;
        height: 40px;
    }
    .selfdefineDiv{
        display: none;
    }
    .show1{
        display:block;
    }

</style>
<script>
    import headerView from '@/components/header1View.vue';
    export default{
        data(){
            return{
                weekList:[
                    {
                        id:1,
                        text:'周一',
                        isChecked:false
                    },
                    {
                        id:2,
                        text:'周二',
                        isChecked:false
                    },
                    {
                        id:3,
                        text:'周三',
                        isChecked:false
                    },
                    {
                        id:4,
                        text:'周四',
                        isChecked:false
                    },
                    {
                        id:5,
                        text:'周五',
                        isChecked:false
                    },
                    {
                        id:6,
                        text:'周六',
                        isChecked:false
                    },
                    {
                        id:7,
                        text:'周七',
                        isChecked:false
                    }
                ],
                timeList:[
                    {
                        id:1,
                        text:'全天',
                        isChecked:false
                    },
                    {
                        id:2,
                        text:'自定义',
                        isChecked:false
                    }
                ],
                alldayisChecked:false,
                selfisChecked:false
            }
        },
        methods:{

        },
        components:{
            headerView
        }
    }
</script>